<template>
  <div class="h-screen flex overflow-hidden dark:bg-gray-900">
    <!-- 左侧资料卡 -->
    <div class="md:w-1/3 flex-shrink-0 h-full">
      <div class="h-full w-full overflow-hidden">
        <BlogAuthorProfile
          class="dark:bg-gray-900 p-4 sm:p-6 rounded-xl shadow-sm transition-all duration-300 hover:shadow-md h-full w-full"
        />
      </div>
    </div>

    <!-- 右侧项目 -->
    <div class="flex-1 h-full overflow-y-auto">
      <div
        class="rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 transition-all duration-300 hover:shadow-md flex flex-col h-full"
      >
        <div class="titleBox flex justify-between">
          <h3
            class="text-base p-2 sm:text-lg font-semibold dark:text-gray-100 text-primary-dark sm:mb-4"
          >
            最近项目
          </h3>
          <div
            class="backBtn text-primary text-lg p-2 cursor-pointer"
            @click="goToHome"
          >
            博客主页
          </div>
        </div>

        <!-- 加载状态 -->
        <div
          v-if="loading"
          class="py-8 flex flex-grow items-center justify-center"
        >
          <div
            class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary-dark"
          ></div>
          <span class="ml-2 text-gray-600 dark:text-gray-300"
            >加载项目中...</span
          >
        </div>

        <!-- 错误提示 -->
        <div v-else-if="error" class="py-8 text-center text-red-500 flex-grow">
          <p>{{ error }}</p>
          <button
            @click="loadProjects"
            class="mt-2 px-4 py-2 bg-primary-light text-primary-dark rounded-md hover:bg-primary-light/80 transition"
          >
            重试
          </button>
        </div>

        <!-- 无数据提示 -->
        <div
          v-else-if="recentProjects.length === 0"
          class="py-8 text-center text-gray-500 dark:text-gray-400 flex-grow"
        >
          暂无项目数据
        </div>

        <!-- 项目列表 -->
        <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-12">
          <ProjectCard
            v-for="(project, index) in recentProjects"
            :key="project.id || index"
            :project="project"
            class="animate-fadeInUp p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"
            :style="`animation-delay: ${index * 100}ms;`"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import BlogAuthorProfile from '../../../../components/BlogAuthorProfile/index.vue'
import ProjectCard from '../../../../components/ProjectCard/index.vue'

// 状态
const loading = ref(true)
const error = ref(null)
const recentProjects = ref([])

// 获取路由实例
const router = useRouter()

// 加载项目数据
const loadProjects = async () => {
  loading.value = true
  error.value = null

  try {
    const username = 'BelovedLYC' // 替换为实际用户名
    const token = import.meta.env.VITE_GITEE_TOKEN // 从环境变量获取token

    const response = await axios.get(
      `https://gitee.com/api/v5/users/${username}/repos`,
      {
        params: {
          access_token: token,
          sort: 'updated',
          per_page: 10,
          page: 1
        }
      }
    )

    // 处理响应数据
    recentProjects.value = response.data.map((repo) => {
      const icons = [
        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /></svg>`,
        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" /></svg>`,
        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>`,
        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>`,
        `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /></svg>`
      ]

      return {
        ...repo,
        icon: icons[Math.floor(Math.random() * icons.length)]
      }
    })
  } catch (err) {
    error.value = '加载项目失败，请稍后再试'
  } finally {
    loading.value = false
  }
}

// 跳转到主页
const goToHome = () => {
  router.push('/home')
}

// 生命周期
onMounted(() => {
  loadProjects()
})
</script>

<style scoped>
/* 无外部滚动条 */
html,
body {
  height: 100%;
  overflow: hidden;
}

/* 右侧容器支持内部滚动 */
.flex-1 {
  height: 100%;
  overflow-y: auto;
}

/* 为项目列表添加动画 */
.animate-fadeInUp {
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 每行显示两个卡片 */
.grid {
  grid-template-columns: repeat(2, 1fr);
}

/* 微调最近项目向下 */
.grid .animate-fadeInUp {
  margin-top: 20px; /* 调整此值以微调位置 */
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr !important; /* 小屏幕上每行一个卡片 */
  }
  .animate-fadeInUp {
    animation-duration: 0.3s;
  }
}
</style>
